<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1{
                width: 150px;
                height: 400px;
                background-color: #ffee88;
            }
            #h{
                height: 30px;
                background-color: red;
                color: white;
            }

            #b{
                background-color: #ff00ff;
            }

            a{
                text-decoration: none;
            }

            li{
                list-style: none;
            }
        </style>
        <script>
            function f(index){
                var obj=document.getElementById("u"+index);

                if(obj.style.display=="none"){
                    obj.style.display="block";
                }else{
                    obj.style.display="none";
                }
            }

        </script>
    </head>
    <body>
        <div id="d1">
            <div id="h">
                菜单
            </div>
            <div id="b">
                <ul>
                    <li><a href="javascript:;" onclick="f(1)">menu1</a></li>
                    <ul id="u1" style="display: none;">
                        <li>item1</li>
                        <li>item2</li>
                    </ul>
                    <li><a href="javascript:;" onclick="f(2);">menu2</a></li>
                    <ul id="u2" style="display: none;">
                        <li>item3</li>
                        <li>item4</li>
                    </ul>
                </ul>
            </div>

        </div>

    </body>
</html>